<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Une présentation</title>

        <!--<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>-->

        <script type="text/javascript" src="logic/json2.js"></script>
        <script type="text/javascript" src="logic/jquery.js"></script>
		<script type="text/javascript" src="logic/ui/effects.core.js"></script>
		<script type="text/javascript" src="logic/ui/effects.blind.js"></script>
		<script type="text/javascript" src="logic/ui/effects.clip.js"></script>
		<script type="text/javascript" src="logic/ui/effects.drop.js"></script>
		<script type="text/javascript" src="logic/ui/effects.explode.js"></script>
		<script type="text/javascript" src="logic/ui/effects.fade.js"></script>
		<script type="text/javascript" src="logic/ui/effects.fold.js"></script>
		<script type="text/javascript" src="logic/ui/effects.scale.js"></script>
		<script type="text/javascript" src="logic/ui/effects.slide.js"></script>
		<script type="text/javascript" src="logic/ui/ui.core.js"></script>
		<script type="text/javascript" src="logic/ui/ui.slider.js"></script>
        <script type="text/javascript" src="logic/ui/jquery.mousewheel.min.js"></script>
        <script type="text/javascript" src="logic/slideMe.core.js"></script>
        <script type="text/javascript" src="logic/slideMe.helpers.js"></script>
        <script type="text/javascript" src="logic/jquery.slideMe.js"></script>
        <link type="text/css" rel="stylesheet" href="layout/style.css"/>
        <style type="text/css">
            html, body {
                background: url('layout/bg.png') repeat-x;
				padding: 0;
                margin: 0;
				width: 100%;
				height: 100%;
                overflow: hidden;
            }
			.sldmSlide * {
				color: white;
			}
			.sldmSlide li ul {
				font-size: 80%;				
				list-style: circle;
			}
			ul.sldmElement > li, ol.sldmElement > li {
				display:none;
			}
        </style>
    </head>
    <body>
        <div class="sldmFonts">
            <span class="sldmFontA" data-width="803">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeeeeeeeeeeetttttttttaaaaaaaaoooooooiiiiiiinnnnnnsssssshhhhhhrrrrrrddddllllcccuuummwwffggyyppbvk</span>
            <span class="sldmFontT" data-width="704">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeeeeeeeeeeetttttttttaaaaaaaaoooooooiiiiiiinnnnnnsssssshhhhhhrrrrrrddddllllcccuuummwwffggyyppbvk</span>
            <span class="sldmFontC" data-width="1200">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeeeeeeeeeeetttttttttaaaaaaaaoooooooiiiiiiinnnnnnsssssshhhhhhrrrrrrddddllllcccuuummwwffggyyppbvk</span>
            <span class="sldmFontG" data-width="863">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeeeeeeeeeeetttttttttaaaaaaaaoooooooiiiiiiinnnnnnsssssshhhhhhrrrrrrddddllllcccuuummwwffggyyppbvk</span>
            <span class="sldmFontV" data-width="924">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eeeeeeeeeeeetttttttttaaaaaaaaoooooooiiiiiiinnnnnnsssssshhhhhhrrrrrrddddllllcccuuummwwffggyyppbvk</span>            
        </div>
        <div class="sldmView">
            <div class="sldmPresentation">
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"type": "toggle"
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
                    <img id="e3" class="sldmElement" src="media/greyline.png" style="display:block;top:41.5%;left:10%;width:80%;height:0.3%;">
                    <h1 id="e6" class="sldmElement sldmFontG" style="display:block; top:30.5%; left:10.5%;width:80%;height:16%;text-align:center;font-size:200%;color:black;">Une présentation</h1>
					<h1 id="e1" class="sldmElement sldmFontG" style="display:block; top:30%; left:10%;width:80%;height:16%;text-align:center;font-size:200%">Une présentation</h1>
					<img id="e5" class="sldmElement" src="media/controls.png" style="display:block;top:50%;left:20%;width:60%;height:28%">
					<p id="e7" class="sldmElement sldmFontG" style="display:block; bottom:5.5%; left:5.5%;width:80%;font-size:70%;color:black;">dans un navigateur</p>
					<p id="e2" class="sldmElement sldmFontG" style="display:block; bottom:5%; left:5%;width:80%;font-size:70%;">dans un navigateur</p>
					<div id="e4" class="sldmElement sldmFontA" style="display:block; top:83%;left:15%;width:80%;height:12%;text-align:right;color:#FF0000">Louis-Rémi Babé<br />2008</div>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click" 
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
					<img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
                    <img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h2 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">Une présentation</h2>
                    <ol id="e4" class="sldmElement sldmFontG" style="display:block; top:20%; left:10%;">
						<li>D'un stage
						<ul>
							<li>dépaysant</li>
							<li>et passionnant</li>
						</ul></li>
						<li>De ses difficultés
						<ul>
							<li>besoin de constance</li>
							<li>dans un milieu hétérogène</li>
							<!--Choix philosophique et technique-->
							<li>avec des outils disparates
							<!--<ul>
								<li>abstraction et traque des bogues</li>
							</ul>--></li>
							<!--<li>cela donne...</li>-->
						</ul></li>
						<li>Et de sa valeur ajoutée
						<ul>
							<li>redécouvrir javascript</li>
							<li>créer une base solide</li>
							<li>avec et pour les autres</li>
						</ul>	
						</li>
					</ol>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">01</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right",
										"duration": 400,
										"delay": 0
									},
									"trigger": "click"
									
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade",
										"delay": 1
									},
									"trigger": "after"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">1. Un stage</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Son cadre</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>La ville de Middlesbrough :
					<ul>						
						<li>second port d'Angleterre</li>
						<li>Middlesbrough F.C.</li>
						<li>cheminées et fumées</li>
					</ul>
					</li>
					<li>L'University of Teesside :
					<ul>
						<li>20 000 étudiants</li>
						<li>animations numériques, jeux vidéo</li>
					</ul>
					</li>
					<li>Une équipe, un projet :
					<ul>
						<li>Steven Mead</li>
						<li>application type <i>PowerPoint</i>, en ligne</li>
						<li>Clément Gonnet, Samuel Garnier et moi</li>						
					</ul>
					</li>					
					</ul>
					<img id="e5" class="sldmElement" src="media/2251369494_7a26fe0298_b.jpg" style="display:none;top:55%;left:20%;width:60%;">
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">02</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "animate",
									"css": {
										"color": "black"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "animate",
									"o": {
										"duration": 400
									},
									"css": {
										"opacity": 0.2
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">2. Des difficultés</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Un besoin de constance</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>positionnement des éléments</li>
					<li>taille relative des éléments</li>
					<li>couleur et même opacité</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">03</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">2. Des difficultés</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Un milieu hétérogène</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>différents navigateurs</li>
					<li>différentes résolutions d'écran</li>
					<li>différents jeux de police</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">04</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right",
										"delay": 0,
										"duration": 300
									},
									"trigger": "click"
								},
								{
									"id": "e6",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right",
										"delay": 0,
										"duration": 300
									},
									"trigger": "after"
								},
								{
									"id": "e6",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right",
										"delay": 0,
										"duration": 300
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade",
										"delay": 0,
										"duration": 300
									},
									"trigger": "after"
								},
								{
									"id": "e7",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								},
								{
									"id": "e8",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									}
								},
								{
									"id": "e9",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								},
								{
									"id": "e8",
									"type": "animate",
									"o": {
										"duration": 250,
										"delay": 250
									},
									"css": {
										"left": "50%"
									},
									"trigger": "click"
								},
								{
									"id": "e7",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									},
									"trigger": "click"
								},
								{
									"id": "e8",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									}
								},
								{
									"id": "e9",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									}
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">2. Des difficultés</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Des outils disparates</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>librairies d'abstraction</li>
					<li>esprit inventif
					<ul>
						<li><del>em, %</del></li>
						<li>Verdana != Geneva != Bitestream Vera</li>
						<li>=> étalon</li>
					</ul>
					</li>
					<li>traque des bogues</li>
					</ul>
					<img id="e5" class="sldmElement" src="media/x dev.png" style="display:none;top:20%;left:20%;width:60%;">
					<img id="e6" class="sldmElement" src="media/1 dev.png" style="display:none;top:20%;left:27%;width:45%;">
					<img id="e7" class="sldmElement" src="media/etalon.png" style="display:none;top:67%;left:15%;width:22%;">
					<img id="e8" class="sldmElement" src="media/regle.png" style="display:none;top:62%;left:15%;width:30%;">
					<img id="e9" class="sldmElement" src="media/etalon.png" style="display:none;top:67%;left:50%;width:27%;">
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">05</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(3)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">3. De la valeur ajoutée</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Redécouvrir Javascript</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>langage de prédilection du Web</li>
					<li>grande simplicité</li>
					<li>Orienté Objet par dessein</li>					
					<li>offrant de grandes perspectives</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">06</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">3. De la valeur ajoutée</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Une base solide</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>structure inspirée par jQuery</li>					
					<li>modèle "event driven"</li>
					<li>code optimisé</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">07</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e5",
									"type": "toggle",
									"o": {
										"effect": "drop",
										"direction": "right"
									}
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">3. De la valeur ajoutée</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">Avec et pour les autres</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>nouvelle expérience de travail en équipe</li>					
					<li>intégration à une communauté</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">08</span>
					<img id="e5" class="sldmElement" src="media/jquery.png" style="display:none;top:50%;left:40%;width:24%;" />
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"id": "e4 > li:eq(0)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									}
								},
								{
									"id": "e4 > li:eq(1)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								},
								{
									"id": "e4 > li:eq(2)",
									"type": "toggle",
									"o": {
										"effect": "fade"
									},
									"trigger": "click"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<img id="e2" class="sldmElement" src="media/greyline.png" style="display:block;top:17%;left:7%;width:80%;height:0.3%;">
					<h3 id="e1" class="sldmElement sldmFontG" style="display:block; top:7%; left:7%; width:80%;font-size:170%">3. De la valeur ajoutée</h3>
                    <h4 id="e3" class="sldmElement sldmFontG" style="display:block; top:20%; left:13%; width:80%;font-size:120%">À suivre...</h4>
					<ul id="e4" class="sldmElement sldmFontG" style="display:block;top:30%;left:16%;">
					<li>un projet à partager</li>					
					<li>de nouvelles technologies à explorer</li>
					<li>une nouvelle année d'études</li>
					</ul>
					<span style="position:absolute;display:block;bottom:5%;right:5%;color:#FF0000;font-size:150%;text-align:right;">09</span>
                </div>
                <div class="sldmSlide">
                    <script type="text/javascript">
                        j = {
                            "transition": [
                                {
                                    "effect": "slide",
									"direction": "down"
                                }, {
                                    "effect": "slide",
									"direction": "up"
                                }
                            ],
                            "animations": [
                                {
									"type": "effect"
								}
                            ]
                        }
                    </script>
                    <img src="media/bg.png" style="display:block;top:0;left:0;width:100%;height:100%;">
					<p id="e2" class="sldmElement sldmFontG" style="display:block; top:41%; left:40%;width:20%;text-align:center;font-size:400%;">?</p>
					<img id="e3" class="sldmElement" src="media/UOT.png" style="display:block;top:25%;left:11%;width:14%;" />
					<img id="e4" class="sldmElement" src="media/UCBL.png" style="display:block;top:25%;left:27%;width:14%;" />
					<img id="e5" class="sldmElement" src="media/region rhone alpes.png" style="display:block;top:30%;left:43%;width:14%;" />
					<img id="e6" class="sldmElement" src="media/IUTA_LYON1.png" style="display:block;top:23%;left:59%;width:14%;" />
					<img id="e7" class="sldmElement" src="media/250px-European_flag.svg.png" style="display:block;top:27%;left:75%;width:14%;" />
					<img id="e8" class="sldmElement" src="media/jquery.png" style="display:block;top:72%;left:15%;width:24%;" />
					<img id="e9" class="sldmElement" src="media/firebug.png" style="display:block;top:73%;left:40%;width:24%;" />
					<img id="e0" class="sldmElement" src="media/aptana.png" style="display:block;top:72%;left:66%;width:24%;" />
                </div>				
            </div>
            <div class="sldmNavSlider"><div class="sldmHandle"></div></div>
        </div>
        <div class="sldmNavBar" href="#nogo">
            <ul class="sldmNavBar-ul">
                <li class="sldmNavBar-li"><a class="sldm109" href="#sldmThumb" title="switch to thumbnail"></a></li>
                <li class="sldmNavBar-li"><a class="sldm38" href="#sldmFr" title="go to previous slide"></a></li>
                <li class="sldmNavBar-li"><a class="sldm37" href="#vR" title="previous step"></a></li>
                <li class="sldmNavBar-li"><a class="sldm39" href="#sldmF" title="play/next step"></a></li>
                <li class="sldmNavBar-li"><a class="sldm40" href="#sldmFf" title="go to next slide"></a></li>
                <li class="sldmNavBar-li"><a class="sldm61" href="#sldmM" title="show me your tits"></a></li>
            </ul>
        </div>
    </body>
</html>